<template>
    <div>
        <!-- 用户编辑对话框 -->
        <el-button type="text" @click="dialogFormVisible = true;operateType = 'save'">添加用户</el-button>

        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" @close="handleClose">
            <el-form :model="user">
                <el-form-item label="用户编号" :label-width="formLabelWidth">
                    <el-input v-model="user.userId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户账号" :label-width="formLabelWidth">
                    <el-input v-model="user.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" :label-width="formLabelWidth">
                    <el-input show-password v-model="user.userPwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" :label-width="formLabelWidth">
                    <el-input v-model="user.userType" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">确 定</el-button>
            </div>
        </el-dialog>
        <!--        数据表格-->
        <el-table
                :data="users"
                style="width: 100%">
            <el-table-column
                    label="用户编号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户账号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户密码">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userPwd }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户类型">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userType }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="current"
                @current-change="loadUsers">
        </el-pagination>
    </div>
</template>
<script>
    //引用vue对象
    export default {
        //绑定数据
        data(){
            return {
                users:[], //用户数组
                dialogFormVisible: false, //控制对话框的显示
                formLabelWidth: "120px",
                user:{userId:'',userName:'',userPwd:'',userType:''}, //用户数据
                operateType:'', //操作类型 save update
                total: 0, //用户总数
                pageSize: 5, //每一页行数
                current: 0, //当前页数
            }
        },
        methods:{
            //分页查询用户
            loadUsers(current){
                this.current = current
                this.$http.get('/user/page?current='+this.current+"&pageSize="+this.pageSize).then(resp => {
                    console.log(resp)
                    //绑定后端返回的数据
                    if(resp.data){
                        this.users = resp.data.records
                        this.total = resp.data.total
                    }
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.operateType = 'update';
                //显示对话框，绑定数据
                this.dialogFormVisible = true;
                //进行深克隆 row--->string---->json
                this.user = JSON.parse(JSON.stringify(row));
                this.user.user_pwd = '';
            },
            //保存数据操作
            handleSave(){
                if(this.operateType == 'save'){
                    //添加用户
                    this.$http.post('/user',this.user)
                        .then(resp => {
                            console.log('save user',resp.data)
                            if(resp.data == true){
                                console.log('save successfully')
                                this.loadUsers(this.current);
                            }
                        })
                }else{
                    //更新用户
                    this.$http.put('/user',this.user)
                        .then(resp => {
                            console.log('update user',resp.data)
                            if(resp.data == true){
                                console.log('update successfully')
                                this.loadUsers(this.current);
                            }
                        })
                }
                this.dialogFormVisible = false
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete('/user/' + row.userId).then(resp => {
                        if(resp.data == true){
                            this.loadUsers(this.current);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //对话框关闭
            handleClose(){
                this.user = {user_id:'',user_name:'',user_pwd:'',user_type:''}
                this.operateType = ''
            }
        },
        mounted(){
            this.loadUsers(1)
        }
    }
</script>